<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>boke</title>
		<script src="../build/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../build/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../css/head.css">
		<script src="../build/jquery.min.js"></script>
		<script src="../build/jquery-ui.min.js"></script>
		<style>
			#language-block,
			#login-block {
				width: 100%;
				height: 100px;
				background-color: white;
				/*background-color: #00BFFF;*/
				opacity: .7;
				position: absolute;
				top: 60px;
				left: 0;
				overflow: hidden;
				display: none;
			}
			
			#language-style,
			#login-style {
				/*border: 1px solid red;*/
				position: absolute;
				top: 60px;
				left: 0;
				width: 100%;
				height: 100px;
				display: none;
			}
			
			#language-style p,
			#login-style p {
				margin-left: 91%;
				margin-top: 20px;
			}
			
			#language-style p:hover,
			#login-style p:hover {
				color: deepskyblue;
			}
			/**/
			
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				height: 100%;
				width: 100%;
				background: rgb(238, 238, 238);
			}
			
			#content {
				width: 75%;
				margin: auto;
				position: relative;
				left: 0;
				top: 0;
				overflow: hidden;
				margin-top: 60px;
			}
			
			#app>div {
				float: left;
				/*margin: 1%;*/
				width: 31.33%;
				position: absolute;
				left: 0;
				top: 0;
				transition: all .5s;
				background: white;
			}
			
			#app>div:hover {
				opacity: 0.7;
			}
			
			.imgclass {
				width: 100%;
			}
			
			#app>div>p {
				padding: 2%;
			}
			
			.p1 {
				transition: all .5s;
				color: #111;
				zoom: 1;
				font-size: 16px;
				letter-spacing: 1px;
				cursor: pointer;
			}
			
			.p1:hover {
				color: #59a0d6;
			}
			
			.p2 {
				color: #999;
				zoom: 1;
				font-size: 12px;
				letter-spacing: 1px;
				font-style: italic;
			}
			
			.p3 {
				color: #111;
				zoom: 1;
				font-size: 15px;
				line-height: 20px;
				letter-spacing: 1px;
				max-height: 55px;
				overflow: hidden;
				text-overflow: ellipsis;
				/*white-space:nowrap;*/
			}
			
			#app>div>a {
				color: #59a0d6;
				cursor: pointer;
				text-decoration: none;
				
				margin-left:2%;
			}
			
			#app>div>.showtime {
				margin-top: 4%;
				padding: 5% 2%;
				font-size: 10px;
				border-top: 1px solid rgb(208, 208, 208);
				color: #999;
				zoom: 1;
				vertical-align: middle;
				/*text-transform: uppercase;*/
				letter-spacing: 2px;
			}
		</style>
	</head>

	<body>
		<header>
			<div class="header_top">
				<div class="header_log">
					<img src="../img/logo.png" alt="图片不在了">
				</div>

				<ul>
					<li id="product"><a href="">私生活</i></a></li>
					<li id="help"><a href="">小觅</a></li>
					<li id="cooperation"><a href="">SDENO</a></li>

					<li id="news"><a href="boke.html"><span style="color:rgb(0,173,238) ">博客</span></a></li>
					<li id="about-us"><a href="../aboutus/aboutus.html">社区</a></li>
					<li id="news"><a href="../news/news.html">关于我们</a></li>

				</ul>
			</div>

		</header>
		<div id="content">
			<div id="app">
				<show v-for="data in model" :data="data"></show>
			</div>
		</div>
		<template id="show">
			<div class="divclass">
				<img :src="data.imgurl" alt="" class="imgclass" />
				<br/>
				<p class='p1'>{{data.title}}</p>
				<p class='p2'>by {{data.author}},觅</p>
				<p class='p3'>
					{{data.content}}
				</p>
				<a :href="data.url">Read more...</a>
				<div class='showtime'>
					{{data.time}}
				</div>
			</div>
		</template>
		<!--------------页脚社区友情链接及相关-->
		<footer>

			<!---------社区及相关-->
			<div class="revevance_container">
				<section class="revevance_con">
					<section class="chain_row">
						<section class="row_left">
							<li><a href="###">社区</a></li>
							<li><a href="###">博客</a></li>
							<li><a href="###">新闻</a></li>
							<li><a href="###">帮助中心</a></li>
							<li><a href="###">关于我们</a></li>
						</section>
						<section class="row_right">
							<li>
								<a href="###"></a>
							</li>
							<li>
								<a href="###"></a>
							</li>
							<li>
								<a href="###"></a>
							</li>
							<li>
								<a href="###"></a>
							</li>
							<li>
								<a href="###"></a>
							</li>
						</section>
					</section>
					<p>Copyright © 2014 - 2016 Slightech, Inc. All Rights Reserved. 苏ICP备15025307号-1</p>
				</section>
			</div>
		</footer>
	</body>
	<script type="text/javascript">
		var datas = {};

		function getinfo() {
			$.get(
				"bokeadmin.php", {
					act: "getinfo",
				},
				function(data) {
					var data = JSON.parse(data);
					for(let i=0,l=data.model.length;i<l;i++){
						data.model[i].url="bct.html?id="+data.model[i].id;
					};
					datas = data;

					start();

				}
			)
		};

		//		data = {
		//			datas: [{
		//					imgurl: 'img/boke1.jpg',
		//					title: "小觅智能防丢器开启智能新生活",
		//					author: 'by 陆,觅',
		//					content: '近日，一款名为小觅的智能防丢器在京东众筹开启了预售，短短上线几个小时就获得了上千',
		//					time: "6月17,2016",
		//
		//				}, {
		//					imgurl: 'img/boke1.jpg',
		//					title: "小觅智能防丢器开启智能新生活",
		//					author: 'by 陆,觅',
		//					content: '近日，一款名为小觅的智能防丢器在京东众筹开启了预售，短短上线几个小时就获得了上千',
		//					time: "6月17,2016",
		//
		//				},
		//
		//			]
		//		};
		getinfo();

		//创建一个组件
		function start() {
			Vue.component('show', {
					template: '#show',
					props: ['data'],
				})
				//创建根实例
			var vm = new Vue({
				el: '#app',
				data: datas,

			});
			
			//瀑布流函数
			var arrnum = 3;

			function falls() {
				//初始化高度数组
				var arrH = [];
				for (var i = 0; i < arrnum; i++) {
					arrH[i] = 10;
				}
				//获取div
				var divs = document.getElementsByClassName("divclass");
				var cw = document.getElementById("content").offsetWidth;
				var space = cw / 100;
				var dw = cw / 100 * 32;
				var content = document.getElementById("content");

				// 求最短列

				for (let i = 0; i < divs.length; i++) {

					var minH = arrH[0];
					var minI = 0;
					var maxH = arrH[0];
					var maxI = 0;
					for (var j = 0; j < arrH.length; j++) {
						if (minH > arrH[j]) {
							minH = arrH[j];
							minI = j;
						}
						if (maxH < arrH[j]) {
							maxH = arrH[j];
							maxI = j;
						}
					};

					var img = divs[i].querySelector("img");
					let w = divs[0].offsetWidth;
					let h = divs[i].offsetHeight;
					divs[i].style.left = minI * w + (2 * minI + 1) * space + "px";
					divs[i].style.top = minH + parseInt(i / 3) * 2 * space + "px";
					arrH[minI] = arrH[minI] + h;
					content.style.height = maxH + parseInt(i / 3) * 2 * space + 50 + "px";
					// alert(content.offsetHeight)

				}
			}
			//图片加载完成运行瀑布流函数
			var arrimg = [];

			(function() {

				for (let i = 0, dl = datas.model.length; i < dl; i++) {
					arrimg.push(datas.model[i].imgurl);
				}

			})();

			loadImage(arrimg, {
					"complete": complete
				})
				//回调函数,当图片全部加载完成就是用这个函数
			function complete(imgObj) {

				falls();
				window.onresize = function() {
					falls();
				}
			}

			//图片加载函数
			function loadImage(imgs, obj) {
				var imgObj = {};
				var len = 0;
				var num = 0;
				for (var name in imgs) {
					len++;
				}
				for (var name in imgs) {
					var img = new Image;
					img.src = imgs[name];
					img.onload = (function(name) {
						return function() {
							imgObj[name] = this;
							num++;
							if (num == len) {
								if (obj.complete) {
									obj.complete(imgObj);
								}
							}
						};

					})(name);
				}
			}
		}
	</script>

</html>